<template>
  <div class="add-page">
    <el-dialog :visible.sync="visible" width="80%" :close-on-click-modal="false" @close="$emit('close')">
      <div slot="title" class="header flex-between">
        <div class="flex-rowl">
          <div class="flex-rowl mr10 pointer" @click="$emit('close')">
            <i class="el-icon-switch-button color-fff mr5"></i>
            <span class="color-fff size-14">关闭</span>
          </div>
          <div class="flex-rowl pointer" @click="submit('complete')" v-if="formData.receiptStatus === 'UNDO'">
            <i class="el-icon-position color-fff mr5"></i>
            <span class="color-fff size-14">提交</span>
          </div>
        </div>
        <!-- <div class="flex-rowl pointer">
          <i class="el-icon-printer color-fff mr5"></i>
          <span class="color-fff size-14">打印</span>
        </div> -->
      </div>
      <div class="title">部门通知</div>
      <div>
        <div class="flex-rowr mt40 mb10">
          <span class="size-12">业务单编号：{{ formData.businessId }}</span>
        </div>
        <!-- 表单 -->
        <ZfwFormAdd :formData="formData" :fileds="fileds" ref="formAddRef">
          <template #receiptStatus>
            <div>{{ formData.receiptStatus === 'DONE' ? '已回执' : formData.receiptStatus === 'UNDO' ? '未回执' : '无需回执' }}
            </div>
            <!-- <el-checkbox v-model="receiptStatus" :disabled="true">需要回执</el-checkbox> -->
          </template>
        </ZfwFormAdd>
        <div class="mt24"></div>
        <div class="mb10 size-14" v-if="formData.receiptStatus === 'DONE'"> 回执信息 </div>
        <!-- 处理回执渲染 -->
        <div class="message" v-if="formData.receiptStatus === 'DONE'">
          <div class="flex-rowl message-item">
            <div class="size-14 hed">回执信息</div>
            <div class="flex-1 content">
              <div class="size-14 mb8">{{ formData.receiptMemo }}</div>
            </div>
          </div>
        </div>
        <template v-if="subFileds.length">
          <ZfwFormAdd :formData="formData" :fileds="subFileds" ref="formSubAddRef" />
        </template>
        <!-- 附件表格 -->
        <div class="mt16 mb10 size-14">附件展示</div>
        <ZfwFileTable :files="formData.busiAttachs" :businessId="formData.businessId" :disabled="true" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Mixin from "../config"
import ZfwFormAdd from "@/components/zfw-common/zfw-form-add/index"
import ZfwFileTable from "@/components/zfw-common/zfw-file-table/index.vue"
import { getNoticeInfo, setReadStatus } from "@/api/notice.js"
import { formData } from "../../options"
import { disPerson, replaceFormData } from "@/utils/common.js"
export default {
  mixins: [Mixin],
  props: {
    id: {
      type: String,
      default: ""
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    ZfwFormAdd, ZfwFileTable
  },
  data() {
    return {
      formData,
      fileList: [],
      receiptStatus: 0
    }
  },
  async created() {
    await this.getSlefPerson();
    await this.init()
  },
  methods: {
    async init() {
      const { code, data } = await getNoticeInfo({ id: this.id })
      if (code === 200) {
        const datas = {
          ...data.auditInfo,
          ...data
        }
        for (const key in this.formData) {
          this.formData[key] = datas[key]
        }
        this.formData.auditorIds = datas.auditorIds ? datas.auditorIds.split(",") : []
        this.formData.readerIds = datas.readerIds ? datas.readerIds.split(",") : []
        this.formData.publishTime = data.auditInfo.publishTime
        this.receiptStatus = this.formData.receiptStatus ? true : false
      }
    },
    // 回执提交
    async submit() {
      if (!this.formData.receiptMemo) {
        this.$message.error("请先填写回执")
        return
      }
      const { code } = await setReadStatus(replaceFormData({
        noticeId: this.id,
        receiptMemo: this.formData.receiptMemo
      }))
      if (code == 200) {
        this.$message.success("回执提交成功")
        this.$emit('close')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.message {
  border: 1px solid #CFCCCC;

  .message-item {
    border-bottom: 1px solid #CFCCCC;

    &:last-child {
      border-bottom: none;
    }
  }
}

.header {
  background-color: #2D75D7;
}

.hed {
  font-weight: 700;
  color: #606266;
  width: 125px;
  text-align: right;
  padding-right: 10px;

}

.content {
  padding: 10px;
  border-left: 1px solid #CFCCCC;
}

.title {
  color: #555555;
  font-size: 24px;
  text-align: center;
}
</style>
